<template>
    <div class="manage__page">

      <div class="manage__operate">
        <div>
          <el-button type="primary" plain @click="open_operate('add')">新增</el-button>
          <el-button plain @click="open_operate('update')">编辑</el-button>
          <el-button type="danger" plain @click="delete_getway">删除</el-button>
        </div>
      </div>

      <div class="table__data">
        <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        class=""
        height="100%"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection"  width="55" />
        
        <el-table-column  :align="'center'" show-overflow-tooltip :property="col.property" :label="col.label" v-for="col,index in table_column">
          <template #default="scope" v-if="col.property == 'image_url'">
            <div style="height: 100px;">
              <el-image
                style="width: 100%; height: 100%; object-fit: contain"
                :src="scope.row.image_url"
                fit="contain"
                :preview-src-list="[scope.row.image_url]"
                :preview-teleported="true"
                :hide-on-click-modal="true"
                />
            </div>
          </template>
        </el-table-column>

        <el-table-column  :align="'center'" show-overflow-tooltip property="enable" label="可用">
          <template #default="scope">
             <el-switch
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
                @change="enable_change(scope.row)"
              />
          </template>
        </el-table-column>

      </el-table>
      </div>

      <div class="bottom__page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />  

      </div>

      <MenuDialog
        @confirm="confirm"
        @cancel="cancel"
        :visible="isVisible"
        :title="dialog_title"
        :instance="update_instance"
      >
      </MenuDialog>

    </div>
</template>
           
<script setup>
    import { ref, onMounted } from "vue"
    import MessageBox from '@/utils/MessageBox'
    import MenuDialog from './MenuDialog.vue'
    import { getMenuList, createMenu, editMenu, deleteMenu } from '@/api/manage.js'

    const table_column = ref([
        {'label': 'ID', 'property': 'id'},
        {'label': '名字', 'property': 'name'},
        {'label': '图片', 'property': 'image_url'},
        {'label': '标签', 'property': 'label'},
        {'label': '排序', 'property': 'sort'},
        {'label': '点数', 'property': 'point'},
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const multipleSelection = ref([])

    const isVisible = ref(false)
    const dialog_title = ref('新增菜单')
    const update_instance = ref({})
    const click_oprate = ref('update')

    const tableData = ref([])

    // 获取数据
    const getDataList = async () => {

      var req_data = {
        page: currentPage.value,
        page_size: pageSize.value
      }
      var res = await getMenuList(req_data)
      // console.log(res)
      tableData.value = res.list
      total.value = res.total
    }

    const createData = async (req_data)=>{
      
      var res = await createMenu(req_data)
      getDataList()
    }
    
    // 修改可用开关
    const enable_change = (row)=>{
      // console.log(row)
      var formdata = new FormData()
      for(let [key, val] of Object.entries(row)){
        formdata.append(key, val)
      }
      formdata.delete('image')
      formdata.delete('image_url')
      var req_data = {
          id: row.id,
          data: formdata
        }
        editMenu(req_data)
        MessageBox.success('修改成功！')

    }

    // 用户勾选数据
    function handleSelectionChange(val) {
        
        multipleSelection.value = val
        // console.log(multipleSelection.value)
    }

    // 改变页面大小
    function handleSizeChange(newSize){
      // console.log(newSize)
      pageSize.value = newSize
      getDataList()
    }

    // 改变页码
    function handleCurrentChange(newPage){
      // console.log(newPage)
      currentPage.value = newPage
      getDataList()
    }

    // 操作数据按钮
    function open_operate(operate_type){
        click_oprate.value = operate_type
        if (operate_type == "update"){  
            if(multipleSelection.value.length != 1){
                MessageBox.warning('请选择一条数据')
                return
            }
            dialog_title.value = '修改菜单'
            update_instance.value = multipleSelection.value[0]
        }else{
            dialog_title.value = '新增菜单'
            update_instance.value = {
                point: 10,
                sort: 1,
                queue: 'generate_queue',
                order: 'order_queue',
                enable: 1,
                type: 1,
            }
        }

        isVisible.value = true
    }

    // 删除数据
    function delete_getway(){
        if(multipleSelection.value.length == 0){
            MessageBox.warning('请选择数据')
            return
        }

        var req_data = {
          id: multipleSelection.value.map((value)=>{
              return value.id
          })
        }
        deleteMenu(req_data)
        
        MessageBox.success('删除成功！')
        getDataList()
        multipleSelection.value = []
    }

    // 提交数据
    function confirm(value){
      // console.log(value)
      var formdata = new FormData()
      for(let [key, val] of Object.entries(value)){
        formdata.append(key, val)
      }
      if (click_oprate.value == 'update'){
        
        if (value.update_img != 1){
          formdata.delete('image')
          formdata.delete('image_url')
        }
        var req_data = {
          id: update_instance.value.id,
          data: formdata
        }
        editMenu(req_data)
        MessageBox.success('修改成功！')
      } else{
        createData(formdata)
        MessageBox.success('新增成功！')
      }

      getDataList()
    }

    // 关闭弹窗
    function cancel(){
        isVisible.value = false
    }

    onMounted(()=>{
      getDataList()
    })
    
</script>


<style scoped lang="scss">
.manage__operate{
    height: 45px;
    width: 100%;
    position: relative;
    
    div{
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
.manage__page{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #fff;
  

  .table__data{
    height: calc(100% - 100px);
    // border-top: 1px solid #ebeef5;
  }

  .bottom__page{
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;

        }
}
</style>